.find-page{
  display: flex;
  flex-direction: column;
}
.find-list{
  flex:1;
  z-index: 10;
}

.find-navbar {
  z-index: 500;
  .am-navbar{
    background-color: #f4f4f4;
  }
}

.find-search-wrap{
  width: 75vw;
  display: flex;
  align-items: center;
}
form.find-search-input{
  flex: 1;
  padding: 5px ;
  height: 34px;
  background-color: #fff;
  border-radius: 0 10px 10px 0;
}

.find-to-citylist{
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  margin-right: 0;
  padding-left: 10px;
  border-right:1px solid #f4f4f4;
  border-radius: 10px 0 0 10px;
  background-color: #fff;
}

.find-to-map i{
  width: 20px;
  height: 20px; 
}

.find-selectors-wrap{
  opacity: relative;
  width: 100%;
  height: 50px;
}

.find-selectors{
  position: relative;
  width: 100%;
  background-color: #fff;
  display: flex;
  border-bottom: 5px solid #f4f4f4;
  z-index: 300;
}

.find-page .find-selector{
  width: 25%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  div{
    padding: 0 10px;
    i{
      font-size: 14px;
      color: #666;
    }
  }
  i.spin{
    display: inline-block;
    transform: rotate(180deg);
    color: #21b68a
  }
  &.active{
    color: #21b68a;
  }
}

.find-selector-container{
  width: 100%;
  position: absolute;
  background-color: #fff;
  z-index: 50;

  &.find-selector-area,
  &.find-selector-mode,
  &.find-selector-prise{
    width: 100%;
    top: -300px;
    height: 300px;
    &.show{
      top: 0;
      animation: moveDown .3s ease-out;
    }
  }

  &.find-selector-filter{
    width: 80%;
    top: 0;
    height: 100%;
    right: -80%;
    &.show{
      right: 0;
      top: 0;
      animation: moveLeft .3s ease-out;
    }
  }

  .find-selector-loading{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .find-selector-btn{
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    div{
      padding: 15px 0;
      color: #21b68a;
      font: bold 14px '雅黑';
      display: flex;
      justify-content: center;
      align-items: center;
    }
    div:first-child{
      width: 40%;
      border-top:1px solid  #f4f4f4;
    }
    div:last-child{
      width: 60%;
      color: #fff;
      background-color: #21b68a;
    }
  }
}

.find-selectors-content{
  position: relative;
  &.mask{
    height: calc(100vh - 150px);
    background-color: rgba(0,0,0,.4);
    z-index: 30;
    opacity: 1;
    // animation: showList 1s ease-in-out;
  }
}

.find-selector-filter{
  padding: 5px 10px;
  overflow: hidden;
  .filter-content{
    height: calc(100vh - 155px - 49px);
    overflow-y: auto;
  }
  .title{
    font: bold 16px '宋体';
    padding-bottom: 20px;
  }
  .content{
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 10px;
    .content-item{
      font: 12px '雅黑';
      padding: 8px 15px;
      border-radius: 5px;
      margin: 0 10px 10px 0;
      border: 1px solid #e8e8e8;
      background-color: #fff;
      &.active{
        border: 1px solid #21b68a;
        background-color: #ddf6ee;
        color: #21b68a;
        box-shadow: 1px 1px 5px #999;
      }
    }
  }
}

@keyframes showList {
  from{opacity: 0;}
  to{opacity: 1;}
}

@keyframes moveDown {
  from{top: -300px;}
  to{top: 0;}
}
@keyframes moveLeft {
  from{right: -80%;}
  to{right: 0;}
}
@keyframes moveRight {
  from{right: 0;}
  to{right: -80%;}
}